<template>
  <ScreenAutoAdapter
    :design-draft-height="1080"
    :design-draft-width="1920"
    background="#fff">
    <div class="content-box">
      <ScrollBoard :carousel="true" :height="190" :interval="2150" :width="1200">
        <div v-for="(item,index) in dataList" :key="index" class="test-item">
          {{ item.name }}
        </div>
      </ScrollBoard>
    </div>
  </ScreenAutoAdapter>
</template>

<script>
import ScreenAutoAdapter from "@p/ScreenAutoAdapter";
import ScrollBoard from "@p/ScrollBoard";

export default {
  name: 'TestScreenAutoAdapter',
  components: {ScreenAutoAdapter, ScrollBoard},
  props: {},
  data() {
    return {
      dataList: [],
    }
  },
  created() {
    const list = []
    for (let i = 1; i < 60; i++) {
      list.push({name: `testName${i}`})
    }
    this.dataList = list;
  },
  mounted() {
  },
  methods: {},

}
</script>
<style lang="less" scoped>
.content-box{
  width:1920px;
  height:1080px;
  background-color:#5e6d82;
  display:flex;
  justify-content:center;
  align-items:center;
}

.test-item{
  width:100%;
  border:1px solid #e9e9e9;
  background-color:white;
  height:40px;
  display:flex;
  align-items:center;
  box-sizing:border-box;
  padding-right:20px;
  padding-left:20px;

  span{
    color:#333;
    font-size:20px;
    line-height:20px;
    height:20px;
  }

}

.test-item + .test-item{
  margin-top:10px;
}
</style>